<template>
  <div class="body">
    <div class="head">
      <breadcrumb :breadcrumbList="breadcrumbList"></breadcrumb>
    </div>
    <div class="leftList">
      <h3>产品类型列表</h3>
      <el-container>
        <el-row style="width: 100%">
          <el-col :span="6">
            <el-tree
              :data="data"
              icon-class="iconfont icon-jiahao"
              :draggable="true"
              :default-expand-all="true"
              :default-expanded-keys="[1]"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-col>
          <el-col :span="18">
            <headerForm 
            :headerFormList="headerFormList"
            @search ="search"
            >
            
              <!-- 很多页面的查询的输入框都不一样多 并且输入框不一定都配置一个查询按钮 -->
              <template v-slot:rightbox="{ obj }">
                <div>
                  <div class="rightBox">
                    <div class="box">
                      <div>34%</div>
                      <div>服装服饰</div>
                    </div>
                    <div class="box">
                      <div>66%</div>
                      <div>其他商品</div>
                    </div>
                  </div>
                </div>
              </template>
            </headerForm>  
            <tableproject
                :headerdata="headerdata"
                :tableData ="tableData"
                :total="total"
                @SizeChange="SizeChange"
                @CurrentChange="CurrentChange"
             >
                <template v-slot:menu ="{row}">
                    <div >
                        <el-button
                        size="mini"
                        @click="handleEdit(row)"
                        >编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(row)"
                        >删除</el-button>
                    </div>
                </template>
             </tableproject>
            <div>
           
            </div>
          </el-col>
        </el-row>
      </el-container>

      <!-- <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane label="活动文案">
                    <kwNineSuperTable
                        :headerData="headerData"
                        :total="total"
                        :tableData="tableData"
                        @CurrentChange="CurrentChange"
                        @SizeChange="SizeChange">
                            <template v-slot:menu="{row}">
                                <div>
                                    <el-button @click="editDoc(row)" type="success" size="small">编辑</el-button>
                                    <el-button type="danger" size="small" @click="deleteDoc(row)">删除</el-button>
                                </div>
                            </template>
                </kwNineSuperTable></el-tab-pane>
                <el-tab-pane label="系统通知">配置管理</el-tab-pane>
            </el-tabs> -->
           

      <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="台数" prop="region">
                <el-input v-model="ruleForm.region"></el-input>
              </el-form-item>
             
              <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          
            </el-form>
        
      </el-dialog>
    </div>
  </div>
</template>
<script>
import breadcrumb from "@/components/breadcrumbHeader";
import headerForm from "@/components/headerForm";
import  tableproject from "@/components/tableproject";
import {inventoryTableListMock ,inventoryTableListMockDel ,inventoryTableListMockEdit} from "@/api/inventoryManagement";
export default {
  name: "inventoryManagement",
  data() {
    return {
       ruleForm: {
          name: '',
          region: ''
        },
         rules: {
          name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
          ],
          region: [
            { required: true, message: '请输入台数', trigger: 'change' }
          ]
          },
      dialogVisible: false,
      shopName: "",
      classifier: "",
      headerdata: [
        {
          prop: "name",
          label: "商品名称",
          width: "180",
          fixed: true,
        },
        {
          prop: "belongsPoints",
          label: "所属分树",
          width: "180",
        },
        {
          prop: "setNumber",
          label: "台数",
          width: "180",
        },
        {
          prop: "RequiredSupplier",
          label: "所属供应商",
          width: "180",
        },
        {
          prop: "inventoryWarning",
          label: "库存预警",
          width: "180",
        },
        {
          prop: "inventoryStatus",
          label: "库存状态",
          width: "180",
        },
        {
          prop: "status",
          label: "状态",
          width: "180",
        },
      ],
      tableData: [
     
      ],
      total:0,
      headerFormList: [
        {
          label: "商品名称",
          name: "",
          isBtn: true,
          formtype: "1",
        },
        {
          label: "商品类别",
          name: "",
          isBtn: true,
          formtype: "2",
          optionList: [
            {
              value: "选项1",
              label: "黄金糕",
            },
            {
              value: "选项2",
              label: "双皮奶",
            },
            {
              value: "选项3",
              label: "蚵仔煎",
            },
            {
              value: "选项4",
              label: "龙须面",
            },
            {
              value: "选项5",
              label: "北京烤鸭",
            },
          ],
        },
      ],
      breadcrumbList: [
        {
          name: "库存管理",
        },
      ],
      data: [
        {
          label: "商城列表",
          children: [
            {
              label: "库存1",
              children: [
                {
                  label: "库存11",
                },
              ],
            },
            {
              label: "库存2",
              children: [
                {
                  label: "库存22",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      pagenum:"1",
      pagesize:"10",
      searchName:""
    };
  },
  mounted() {
     let _self= this;
     _self.searchList()
  },
  methods: {
    submitForm(formName) {
      let _self = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              name:_self.ruleForm.name,
              setNumber :_self.ruleForm.region,
              id:_self.ruleForm.id
            }
            inventoryTableListMockEdit(data).then(res =>{
              // console.log(res)
              _self.$message("编辑成功")
              _self.dialogVisible = false;
               _self.searchList()
            })
          } else {
            return false;
          }
        });
      },
    handleEdit(row){
      let _self = this;
      // ruleForm.region
      console.log(row)
      let data = JSON.parse(JSON.stringify(row));
      _self.ruleForm.name = data.name;
      _self.ruleForm.region = data.setNumber;
      _self.ruleForm.id = data.id;
      _self.dialogVisible = true;

    },
    handleDelete(scr){
        let _self = this;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("1111")
            let data ={
              id:scr.id
            }
            inventoryTableListMockDel(data).then(res =>{
              console.log(res)
              _self.searchList()
            })
        }).catch(() => {
          _self.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     
    },
    searchList(){
       let _self= this;
      let data ={
        pagenum :_self.pagenum,
        pagesize :_self.pagesize, 
        name:_self.searchName 
      }
       inventoryTableListMock(data).then(res=>{
           console.log(res)
           for(let item of res.data.user){
               if(item.setNumber < item.inventoryWarning){
                   item.inventoryStatus = "不足"
               }else{
                   item.inventoryStatus = "稳定"
               }
            //    setNumber inventoryWarning
           }
           _self.tableData = res.data.user;
           _self.total = res.data.total;
           
       })
    },
    SizeChange(val){
      let _self = this;
      _self.pagesize = val;
       _self.searchList()
    },
    CurrentChange(val){
      let _self = this;
      _self.pagenum = val;
     _self.searchList()
    },
    search(index){
      console.log(index)
      let _self = this;
      _self.searchName = _self.headerFormList[index].name;
       _self.searchList()
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
  components: {
    breadcrumb,
    headerForm,
    tableproject
  },
};
</script>
<style scoped>
.body {
  padding: 10px 20px;
}
.el-breadcrumb {
  margin: 10px 0;
}
.leftList {
  height: 100%;
  margin: 10px 10px 30px 0;
}
.fromBox {
  display: flex;
}
.fromBox .elform {
  flex: 1;
}
.el-tabs {
  height: 390px !important;
}
.tablePadding {
  padding: 0;
}
h3 {
  width: 100%;
  background: #53bccd;
  color: #fff;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
}

.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
</style>